<template>
  <div class="body-right">
    <img
      class="centerimg mp3view"
      v-if="['jpg', 'png', 'jpeg'].indexOf(currentFile.ext) !== -1"
      :src="baseApi + currentFile.filePath"
      alt=""
    />
    <video
      v-if="currentFile.ext === 'mp4'"
      controls
      controlsList="nodownload"
      class="mp3view"
      :src="baseApi + currentFile.filePath"
    ></video>
    <video
      v-if="currentFile.ext === 'mp3'"
      controls
      controlsList="nodownload"
      name="media"
      class="mp3view"
    >
      <source :src="baseApi + currentFile.filePath" type="audio/mpeg" />
    </video>
    <iframe
      allowfullscreen="true"
      mozallowfullscreen="true"
      webkitallowfullscreen="true"
      v-if="
        ['pdf', 'ppt', 'pptx', 'docx', 'doc'].indexOf(currentFile.ext) !== -1
      "
      :src="`${web365}furl=${baseApi + currentFile.filePath}`"
      frameborder="0"
      style="width: 100%; height: calc(100vh - 60px)"
    />
    <iframe
      v-if="['zip', 'rar'].indexOf(currentFile.ext) !== -1"
      :src="`${web365}furl=${baseApi + currentFile.filePath}`"
      frameborder="0"
      style="width: 100%; height: calc(100vh - 60px)"
    ></iframe>
  </div>
</template>

<script lang="js">
  import $ from '$';
	export default {
		name: "pageView",
		props: {
			// lessonInfo: {
			// 	type: Object,
			// 	default: null
			// },
			courseIndexDto: {
				type: Array
			},
			currentFile: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
		  return {
			  baseApi: import.meta.env.VITE_APP_BASE_URL,
			  web365: $.utils.generatBasePath(),
			//   tab:[{label: '教师教案', value: 2}, {label: '教师说课视频', value: 1}],
			//   tabIndex:  1
		  }
		}
  }
</script>
<style scoped lang="scss">
.body-right {
  height: calc(100vh - 60px);
  .mp3view {
    width: 100%;
    height: calc(100vh - 60px);
  }
}
</style>
